<template>
  <div>
    <h3 class="head">订单信息</h3>
    <el-row>
      <el-col :span="24" v-for="item in orders" :offset="item > 0 ? 3 : 0">
        <div>
          <el-card :body-style="{ padding: '0px' }">
            <div>
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>订单详情</span>

                </div>
                <div v-for="items in item.orderItems" class="text item">
                  <div>
                    商品名称：{{ items.name }}<br/>
                    商品价格：{{ items.price }}<br/>
                    购买数量：{{ items.number }}<br/>
                  </div>
                </div>
              </el-card>
            </div>
            <div style="padding: 14px;">
              <span>交易人：{{ item.username }}</span>
              <div class="bottom clearfix">
                <div>交易日期：{{ item.date }}</div>
              </div>
              <div class="bottom clearfix">
                <div>交易金额：{{ item.all }}</div>
              </div>
            </div>
          </el-card>
          <el-divider><i class="el-icon-loading"></i></el-divider>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Order",
  data() {
    return {
      currentDate: new Date(),
      orders: [{
        username: '',
        date: '',
        all: '',
        orderItems: [{
          name: '',
          price: '',
          number: '',
        }]
      }
      ],
    }
  },
  methods: {
    onLoadOrder() {
      axios.get('http://localhost:8081/order/selectOrder')
        .then((res) => {
          for (let item in res.data.order){
            this.orders.unshift(res.data.order[item]);  //向前追加
          }
          this.orders.pop();//最后一个元素是空的，需要删除
        })
    }
  },
  created() {
    this.onLoadOrder();
  }
}
</script>
<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%
}

.head {
  text-align: center;
}
</style>
